<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>编辑用户</title>
</head>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<script src="./resources/js/jquery.min.js"></script>
<script src="./resources/js/common.js"></script>
<body>
<div id="mainApp">
  <el-container style="padding-top:20px;">
	  <el-header style="heighe:10px;">
		  <el-row :gutter="24">
			<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8">
				<el-breadcrumb class="breadcrumb-inner">
					<el-breadcrumb-item><h2>编辑用户</h2></el-breadcrumb-item>
				</el-breadcrumb>
			</el-col>
		  </el-row>
	  </el-header>
	  <el-main>
	  	  <el-card calss="box-card">
	  	  	<el-row :gutter="24">
	  	  	    <el-col :span="2" :xs="2" :sm="2" :md="2" :lg="2">用户名称</el-col>
		  		<el-col :span="6" :xs="6" :sm="6" :md="6" :lg="6">
		  			<el-input  placeholder="请输入用户名称" v-model="user.realName"></el-input>
		  		</el-col>
		  		<el-col :span="2" :xs="2" :sm="2" :md="2" :lg="2">部门选择</el-col>
		  		<el-col :span="6" :xs="6" :sm="6" :md="6" :lg="6">
		  			<el-cascader :options="depData" :props="props" :show-all-levels="false" v-model="checkDep" change-on-select></el-cascader>
		  		</el-col>
		  	</el-row>
		  	<el-row :gutter="24">
	  	  	    <el-col :span="2">权限列表</el-col>
				<el-col :sm="8" :md="8" :lg="8" :xl="8">
					<el-checkbox-group v-model="checkRole">
      					<el-checkbox v-for="role in roleData" :label="role.id" :key="role.id" border>{{role.roleName}}</el-checkbox-button>
    				</el-checkbox-group>
		  		</el-col>
		  	</el-row>
		  	<el-row :gutter="24">
	  	  	    <el-button type="primary" @click="updateUser">修改</el-button>
		  	</el-row>
		  </el-card>
	  </el-main>
  </el-container>
</div>
</body>
<script>
new Vue({
		el:"#mainApp",
	    data:{
	    	tableData: [],
	    	roleData:'',
	    	checkRole:[],
	    	user:'',
	    	checkDep:[],
	    	depData:[],
	    	props:{
	    		label: 'departmentName',
	    		value: 'departmentCode',
	            children: 'depList'
	    	},
	    	parentsId:''
	    },
	    mounted: function (){
	    	//页面加载初始化
	    	this.findUser();
	    },
	    methods: {
	      //获取用户列表
	      findUser(){
	    	  var data = getRequest();
	    	  var id = data['userId'];
	    	  var depCode = data['depCode'];
	    	  //获取所有的角色列表
	    	  this.findAllRoleList();
	    	  //获取用户下属所有部门tree
	    	  this.findDepData(depCode);
	    	  var _this = this;
	    	  $.post("/sys/findById/"+id, function(data) {
	    		  if(data!=null){
	    			  _this.user = data;
	    			  var roleList = data.roleList;
	    			  var checkArr=new Array();
	    			  for(var i in roleList){
	    				  var index = checkArr.indexOf(roleList[i].id);
	    				  if(index==-1){
	    					  checkArr.push(roleList[i].id); 
	    				  }
	    			  }
	    			  //获取已有角色
	    			  _this.checkRole = checkArr;
	    			  //获取编辑用户的所有上级部门
	    			  _this.findParentsDep(data.departmentCode);
	    		  }
	    	  });
	      },
	      //获取所有角色列表
	      findAllRoleList(){
	    	  var _this = this;
	    	  $.get("/role/finaAllRole", function(data) {
	    		  if(data!=null){
	    			  _this.roleData = data;
	    		  }
	    	  });
	      },
	      //获取登录用户下所有部门列表
	      findDepData(depCode){
	    	  var _this = this;
	    	  $.get("/dep/findDepartmentTree/"+depCode, function(data) {
	    		  _this.depData = data;
	    	  }); 
	      },
	      //获取用户所在部门
	      findParentsDep(depCode){
	    	  var _this = this;
	    	  $.get("/dep/findParentsBydepCode/"+depCode, function(data) {
	    		  data.forEach(v=>{
	    			  _this.checkDep.push(v.departmentCode);
	    		  });
	    	  }); 
	      },
	      updateUser(){
	    	  var check = this.checkRole;
	    	  var _checkstr = "";
	    	  check.forEach(v=>{
	    		  _checkstr+=v+",";
	    	  });
	    	  _checkstr = _checkstr.substring(0,_checkstr.length-1);
	    	  var _this = this;
	    	  $.post("/sys/saveUser/"+_this.user.id+"/"+_this.user.realName+"/"+_checkstr, function(data) {
	    		  if("1"==data.code){
						_this.$alert('<strong>操作成功!</strong>', '提示', {
					          dangerouslyUseHTMLString: true
					    });
	　　　　　　　　　　}else{
						_this.$alert('<strong>操作失败!</strong>', '提示', {
					          dangerouslyUseHTMLString: true
					    });
	　　　　　　　　　　}
	    	  });
	      }
	    }
	  });
</script>
</html>